<template>
    <div>
        <div class="btns">
            <el-button type="primary" size="small" @click="toForHandler">新增</el-button>
        </div>
        <div class="tab_content">
            <el-table :data="application" style="width:100%">
                {{application}}
                <el-table-column prop="name" label="项目名称" width="180"></el-table-column>
                <el-table-column prop="type" label="项目类型" width="180"></el-table-column>
                <!-- <el-table-column prop="introuduce" label="介绍" width="240"></el-table-column> -->
                <el-table-column prop="email" label="邮箱地址" width="300"></el-table-column>
                <el-table-column prop="telephone" label="电话号码" width="300"></el-table-column>
                <!-- <el-table-column prop="appId" label="应用id" width="180"></el-table-column>
                <el-table-column prop="appKey" label="应用" width="180"></el-table-column>
                <el-table-column prop="secretKey" label="secret_key" width="180"></el-table-column> -->
                <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
                    <el-table-column width="100" align="center" label="操作">
                     <!-- slot-scope="scope"：作用域插槽 -->
                        <template slot-scope="scope">
                          <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
                          <!-- scope.row：当前行数据 -->
                             <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { get,post,del } from '@/utils/request'
export default {
  // 定义变量，在模板中直接用用
  data(){
    return {
      application:[],
      visible:false
    }
  },
  // 定义事件处理函数、方法
  methods:{
    handleDelete(row){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 当用户点击了确定才会执行
              let url = "http://localhost:8888/application/deleteById"
              // {id:row.id}是一个对象get、post、delete的三个方法在传参的时候只能传对象
              // 记得导入import { del, get } from '@/utils/request'
              del(url,{id:row.id}).then(resp =>{
                  // 提示
                  this.$message({type:"success",message:resp.message});
                  // 更新页面
                  this.loadApplication();
                })
              })
        },
    handleEdit(row){
        this.$router.push({
            path:"/hyy/application_form",
            query:row
        })
    },
    toForHandler(){
        this.$router.push
        ({path:"/hyy/application_form"})
    },
    tableRowClassName({row,rowIndex}){
        if (rowIndex === 1) {
            return 'warning-row';
        } else if (rowIndex === 3){
            return 'success-row';
        }
        return '';
    },
    // 查询所有的数据
    loadApplication(){
      let url = "http://localhost:8888/application/query"
      get(url).then(resp => {
        // 获取数据之后做的事情
        this.application = resp.data;
        console.log(this.application)
      })
    }
  },
  // 生命周期钩子函数
  created(){
    this.loadApplication();
  }

}
</script>

<style lang="sass" scoped>

</style>

